<template>
  <div class="bottom-wrap">
    <div class="bottom-table-item bottom-table-header">
      <div class="dd" style="width: 10%">出警人单位</div>
      <div class="dd" style="width: 10%">电话号码</div>
      <div class="dd" style="width: 10%">姓名</div>
      <div class="dd" style="width: 10%">下发类型</div>
      <div class="dd" style="width: 20%">下发时间</div>
      <div class="dd" style="width: 40%">预警地址</div>
    </div>
    <vue-seamless-scroll :data="tableData" class="seamless-warp"
                         :class-option="defaultOption"
    >
      <div class="bottom-table-wrap">
        <div class="bottom-table-item"
             v-for="(v, index) in tableData"
             :key="index"
        >
          <div class="dd" style="width: 10%">{{v['station']}}</div>
          <div class="dd" style="width: 10%">{{v['phonenum']}}</div>
          <div class="dd" style="width: 10%">{{v['name']}}</div>
          <div class="dd" style="width: 10%">{{v['type']}}</div>
          <div class="dd" style="width: 20%">{{v['warn_time']}}</div>
          <div class="dd" style="width: 40%">{{v['address']}}</div>

        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import vueSeamlessScroll from 'vue-seamless-scroll'
    import API from "@/api/index.api";
    export default {
        components: {
            // commonDialog,
            // commonForm,
          vueSeamlessScroll
        },
        data () {
            return {
              tableData: [
                {
                  "station": "白玉路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 22:13:24",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "万里派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 22:04:43",
                  "phonenum": "*************",
                  "data_source": "管局"
                },
                {
                  "station": "宜川新村派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 22:04:43",
                  "phonenum": "*************",
                  "type": "冒充客服类诈骗",
                  "data_source": "蚂蚁金服"
                },
                {
                  "station": "宜川新村派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 22:04:43",
                  "phonenum": "*************",
                  "type": "冒充客服类诈骗",
                  "data_source": "蚂蚁金服"
                },
                {
                  "station": "宜川新村派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 22:04:43",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "甘泉路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 22:00:00",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "长征派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:48:04",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "甘泉路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:46:23",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "资金防阻体系"
                },
                {
                  "station": "长风新村派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:40:28",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "资金防阻体系"
                },
                {
                  "station": "桃浦派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:31:46",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "长征派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:04:04",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "真如派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:04:04",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "甘泉路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:04:04",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "甘泉路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:04:04",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "长征派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 21:00:00",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "name": "**",
                  "warn_time": "2024-01-30 20:44:56",
                  "phonenum": "*************",
                  "type": "冒充客服类诈骗",
                  "data_source": "蚂蚁金服"
                },
                {
                  "station": "石泉路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 19:58:49",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "部预警"
                },
                {
                  "station": "长寿路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 19:55:02",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "资金防阻体系"
                },
                {
                  "station": "中山北路派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 19:55:02",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "资金防阻体系"
                },
                {
                  "station": "长风新村派出所",
                  "name": "**",
                  "warn_time": "2024-01-30 19:55:02",
                  "phonenum": "*************",
                  "type": "网上交友",
                  "data_source": "资金防阻体系"
                }              ],
              dialogTableHead: [
                {
                  prop: 'domainName',
                  label: '干预域名',
                  width: '35%'
                },
                {
                  prop: 'domainLocation',
                  label: '域名归属',
                  width: '25%'
                },
                {
                  prop: 'fraudType',
                  label: '欺诈类型',
                  width: '20%'
                },
                {
                  prop: 'fraudDataLocation',
                  label: '数据来源',
                  width: '20%'
                },
              ],
              defaultOption: {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
              },
              tableHead: [
                    {
                        prop: 'station',
                        label: '下发部门'
                    },
                    {
                        prop: 'phonenum',
                        label: '下发号码'
                    },
                    {
                        prop: 'name',
                        label: '下发姓名'
                    },
                    {
                        prop: 'type',
                        label: '下发类型'
                    },
                    {
                        prop: 'warn_time',
                        label: '下发时间',
                        width: 200
                    },
                    {
                        prop: 'data_source',
                        label: '数据类型'
                    },
                ]
            }
        },
        methods: {

          getWarn_person () {
            API.warn_person().then(res=>{

              this.tableData=res.content

            })
          }

        },
        mounted() {
          this.getWarn_person()
        }
    }
</script>
<style lang="stylus">
  .bottom-wrap{
    height: 100%;
    position: relative;
    .bottom-table-header{
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1;
      background: #0d364d;
      display: flex;
      padding: 5px 0;

    }
    .seamless-warp{
      padding-top: 40px;
      height: calc(100% - 40px);
      overflow: hidden;
    }
    .bottom-table-head{
      width: 100%;
      padding: 10px 0;
      display: flex;
      background: #0d364d;
      position: absolute;
      top: 40px;
      left: 0;
      z-index: 9;
    }
    .bottom-table-wrap{
      height: 100%;
      .bottom-table-item{
        padding: 10px 0;
        display: flex;
      }
      .bottom-table-item:nth-child(even){
        background: #144066;
      }
    }
    .dd{
      text-align: center;
      color: #b6c3c9 !important;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
